
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
                                  <%--    投票发布统计--%>
    <title>Title</title>
    <script type="text/javascript"  src="../zeus-static/js/echarts.min.js"></script>
    <script type="text/javascript"  src="../zeus-static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var myChart1 = echarts.init(document.getElementById('main1'));
            var myChart2 = echarts.init(document.getElementById('main2'));
            var myChart3 = echarts.init(document.getElementById('main3'));

            //第一张表
            $.post("/echarts/ajax_announce1", function (result){
             var option = {
                 title: {
                     text: '问卷状态'
                 },
                 tooltip: {},
                 legend: {
                     data:['数量']
                 },
                 xAxis: {
                     data: result.situation,
                 },
                 yAxis: {},
                 series: [{
                     name: '数量',
                     type: 'bar',
                     data: result.total,
                 }]
             };
             myChart.setOption(option);
         },"JSON");
            //第二张表
            $.post("/echarts/ajax_announce2", function (result){
                var  option1 = {
                    // backgroundColor:'#2c343c',
                    title: {
                        text: '发布月份统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['偏多', '偏少', '不多不少', '多', '少']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: result.month,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '偏多',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230]
                        },
                        {
                            name: '偏少',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330]
                        },
                        {
                            name: '不多不少',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330]
                        },
                        {
                            name: '多',
                            type: 'line',
                            stack: '总量',
                            data: [320, 332, 301, 334, 390, 330]
                        },
                        {
                            name: '少',
                            type: 'line',
                            stack: '总量',
                            data: [820, 932, 901, 934, 1290, 1330]
                        }
                    ]
                };
                myChart1.setOption(option1);
            },"JSON");
            //第三张表
            $.post("/echarts/ajax_announce3",  function (result){
                var option2 = {
                    title: {
                        text: '发布年份统计'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['良好', '偏少', '递增', '减少', '平稳']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: result.year,
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '良好',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230]
                        },
                        {
                            name: '偏少',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330]
                        },
                        {
                            name: '递增',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [150, 232, 201, 154, 190, 330]
                        },
                        {
                            name: '减少',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 332, 301, 334, 390, 330]
                        },
                        {
                            name: '平稳',
                            type: 'line',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 932, 901, 934, 1290, 1330]
                        }
                    ]
                };
                myChart2.setOption(option2);
            }, "JSON");
            //第四张表
            $.post("/echarts/ajax_announce4",  function (result){
                var option3 = {
                    title: {
                        text: '发布人统计'
                    },
                    tooltip: {},
                    legend: {
                        data:['数量']
                    },
                    xAxis: {
                        data: result.person,
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: result.total,
                    }]
                };
                myChart3.setOption(option3);
            }, "JSON");
        }

    </script>
</head>
<body>

    <div id="main" style="width: 600px;height:400px; position: relative;left: 100px;top: 50px"></div>
    <div id="main1" style="width: 600px;height:400px; position:relative;left: 900px;bottom: 370px;"></div>
    <div id="main2" style="width: 600px;height:400px; position: relative;left: 100px;top: -320px;"></div>
    <div id="main3" style="width: 600px;height:400px; position:relative;left: 900px;top: -700px;"></div>

</body>
</html>
